import React, { FC, useEffect, useState } from 'react';
import { Form, Select, DatePicker, Button } from 'antd';
import { addTrip, getAllPlane, deleteTrip } from '../Request/planeManager';
import { country } from '../utils/country';
import { Plane, PlaneTrip } from '../types/plane.type';
import dayjs from 'dayjs';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
type FormLayout = 'horizontal' | 'inline' | 'vertical'
type Props = {
    selectedPlane?: Plane;
    selectedTrip?: PlaneTrip;
    layout?: FormLayout;
    buttonText?: string;
    afterSubmit?: (trip: PlaneTrip) => void;
    showDelete?: boolean;
}

type FormValue = {
    origin: string;
    destination: string;
    timeSlot: Date[];
}

export const SchedulingForm: FC<Props> = ({
    selectedPlane,
    selectedTrip,
    layout = 'inline',
    buttonText = 'Add',
    afterSubmit,
    showDelete = false
}) => {
    const [plane, setPlane] = useState<Plane | undefined>(selectedPlane);
    const [planes, setPlanes] = useState<Plane[]>([]);
    const [form] = Form.useForm();
    const handleDelete = () => {
        if (selectedTrip) {
            deleteTrip(selectedTrip).then(afterSubmit)
        }
    }
    useEffect(() => {
        getAllPlane().then(setPlanes)
    }, []);
    useEffect(() => {
        if (selectedTrip) {
            form.setFieldsValue({
                origin: selectedTrip.origin,
                destination: selectedTrip.destination,
                timeSlot: [dayjs(selectedTrip.departuretime), dayjs(selectedTrip.arrivetime)]
            });
        }
    }, [selectedTrip, form]);
    useEffect(() => {
        if (plane) {
            form.setFieldsValue({ plane_id: plane.id });
        }
    }, [plane, form]);

    const onFinish = (value: FormValue) => {
        const trip: PlaneTrip = {
            plane: plane as Plane,
            origin: value.origin,
            destination: value.destination,
            departuretime: dayjs(value.timeSlot[0]).format("YYYY-MM-DD HH:mm:ss"),
            arrivetime: dayjs(value.timeSlot[1]).format("YYYY-MM-DD HH:mm:ss"),
        }
        if (selectedTrip) {
            trip.id = selectedTrip.id;
        }
        addTrip(trip).then(data => {
            afterSubmit?.(data);
        });
    }
    return <Form form={form} layout={layout} onFinish={onFinish} onFieldsChange={(fields) => {
        if (fields[0].name[0] === 'plane_id') {
            setPlane(planes.find(({ id }) => id === fields[0].value))
        }
    }}>
        {
            selectedPlane ? null : <FormItem label="plane" name="plane_id">
                <Select placeholder="Select Plane" style={{ minWidth: 60 }}>
                    {
                        planes.map((p) => {
                            return <Option value={p.id} key={p.id}>{p.name}</Option>
                        })
                    }
                </Select>
            </FormItem>
        }
        <FormItem label="origin" name="origin">
            <Select placeholder="origin" style={{ minWidth: 60 }}>
                {
                    country.map((c) => {
                        return <Option value={c} key={c}>{c}</Option>
                    })
                }
            </Select>
        </FormItem>
        <FormItem label="destination" name="destination">
            <Select placeholder="destination" style={{ minWidth: 60 }}>
                {
                    country.map((c) => {
                        return <Option value={c} key={c}>{c}</Option>
                    })
                }
            </Select>
        </FormItem>
        <FormItem label="time slot" name="timeSlot">
            <RangePicker showTime placeholder={["departuretime", "arrivetime"]} />
        </FormItem>
        <FormItem>
            <Button type="primary" onClick={form.submit}>{buttonText}</Button>
            {showDelete && <Button style={{marginLeft: 20 }} danger type="primary" onClick={handleDelete}>Delete</Button>}
        </FormItem>
    </Form>
}